<template>
  <div>
    <h3>age:{{ age }}</h3>
    <h3>u components: { ChildView },name: {{ user.uname }}</h3>
    <h3>uage: {{ user.uage }}</h3>
    <hr />
    <button type="button" @click="age++">age</button>
    <button type="button" @click="user.uage++">uage</button>
    <button type="button" @click="modifyUname">modifyUname</button>
    <hr />
    <h2>t: {{ t }}</h2>
    <h2>uname: {{ user.uname }}</h2>

    <child-view :title="t" :uname="user.uname" msg="hellow ，儿子。" @myclick="mySon"></child-view>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import ChildView from './ChildView.vue'
let t = ref('这是儿子组件')
let age = ref(20)
let user = reactive({
  uname: '张三丰',
  uage: 120
})

const modifyUname = () => {
  user.uname = '张无忌'
}

const mySon = v => {
  // console.log(unref(v))
  t.value = v
  user.uname = v
}
</script>

<style></style>
